<template>
	<view class="containerzi">
		<view @click="openPopup()">
			<view style="margin-bottom: 8rpx;">
				<text class="required-star">*</text>
				日期
			</view>
			<up-input placeholder="选择日期" v-model="value" :customStyle="{ width: '90vw', pointerEvents: 'none' }"
				readonly></up-input>
		</view>
		<view>
			<view style="margin-bottom: 8rpx; margin-top: 30rpx;">
				<text class="required-star">*</text>
				所属部门
			</view>
			<up-input placeholder="请选择部门" v-model="department" :customStyle="{ width: '90vw' }"
				@blur="change"></up-input>
		</view>
		<view>
			<view style="margin-bottom: 8rpx; margin-top: 30rpx;">
				<text class="required-star">*</text>
				销售人员
			</view>
			<up-input placeholder="请选择销售人员" v-model="salesPerson" :customStyle="{ width: '90vw' }"
				@blur="change"></up-input>
		</view>
		<!--  日期选择器  -->
		<up-datetime-picker title="选择日期" :show="show" v-model="dateValue" mode="date" @confirm="confirm"
			:closeOnClickOverlay="true" @close="closePopup" @cancel="show = false"></up-datetime-picker>

		<!--  订单客户信息  -->
		<view>
			<view style="margin-bottom: 8rpx;margin-top: 30rpx;">
				<text class="required-star">*</text>
				订单客户信息
			</view>
			<view>
				<scroll-view scroll-x="true" class="scroll-view">
					<view class="table-container">
						<table class="mobile-table order-table">
							<thead>
								<tr>
									<!-- <th class="sticky-header">序号</th> -->
									<th v-for="(item, index) in orderList" :key="index" class="nowrap">
										<view style="display:flex;">
											<text v-if="item.required" class="required-star">*</text>
											<view>{{ item.title }}</view>
										</view>
									</th>
									<th class="nowrap">操作</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(row, rowIndex) in tableData" :key="rowIndex"
									@click="clickorder(row, rowIndex)">
									<!-- <td class="sticky-col">{{ rowIndex + 1 }}</td> -->
									<td v-for="(header, colIndex) in orderList" :key="colIndex" class="nowrap"
										:class="{ highlight: header.field === 'orderNum' }">
										{{ row[header.field] }}
									</td>
									<td class="action-cell">
										<up-button type="error" size="mini" :disabled="tableData.length <= 1"
											@click="deleteRow(rowIndex)">
											删除
										</up-button>
									</td>
								</tr>
							</tbody>
						</table>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 订单列表弹窗 -->
		<up-popup :z-index="99999" :show="showOrderListPopup" mode="right" @close="showOrderListPopup = false"
			:customStyle="{ height: '100vh', width: '100vw', borderRadius: '16rpx 0 0 16rpx' }">
			<up-navbar title="选择订单" @leftClick="showOrderListPopup = false" placeholder
				:customStyle="{ backgroundColor: '#fff', borderBottom: '1px solid #f5f5f5' }"></up-navbar>
			<view class="search-box">
				<u-input v-model="searchKeyword" placeholder="输入订单号或客户名称搜索" clearable
					@change="handleSearchInput"></u-input>
			</view>
			<view class="popup-containerd">

				<!-- #ifdef H5 -->
				<view style="height: 20rpx"></view>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<view style="height: 20rpx"></view>
				<!-- #endif -->

				<scroll-view scroll-y class="popup-scroll" @scrolltolower="loadMoreOrders">
					<view v-for="(order, index) in filteredOrders" :key="order.id" class="order-item"
						@click="selectOrderItem(order)">
						<view class="order-info">
							<text class="order-label">订单编号：</text>
							<text class="order-value">{{ order.order_sum }}</text>
						</view>
						<view class="order-arrow">
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</view>
				</scroll-view>
			</view>
		</up-popup>

		<!-- 选择订单客户信息弹窗 -->
		<up-popup :show="showOrderPopup" mode="right" @close="showOrderPopup = false">
			<view class="popup-container">
				<up-navbar :placeholder="false" :title="'订单客户信息'" @leftClick="showOrderPopup = false"
					placeholder></up-navbar>

				<scroll-view scroll-y class="popup-scroll">
          <!-- #ifdef H5 -->
          <view style="height: 60rpx"></view>
          <!-- #endif -->

          <!-- #ifdef APP-PLUS -->
          <view style="margin-top: 100rpx"></view>
          <!-- #endif -->
					<view class="popup-content">
						<up-form :model="currentOrder" :rules="orderRules" ref="orderForm" label-position="top">
							<up-form-item v-for="item in orderList" :key="item.field" :label="item.title"
								:required="item.required" :prop="item.field">
								<!-- 处理方式单选框 -->
								<up-radio-group v-if="item.type === 'radio'" v-model="currentProduct[item.field]">
									<up-radio v-for="option in item.options" :key="option.value" :label="option.label"
										:name="option.value" @change="radiochange"></up-radio>
								</up-radio-group>
								<up-input v-else @click="item.field === 'orderNum' ? openOrderListPopup() : null"
									@input="item.field === 'adjustPrice' ? calculateActualPayable(currentOrder) : null"
									v-model="currentOrder[item.field]" :placeholder="`请输入${item.title}`"
									:disabled="item.disabled"></up-input>
							</up-form-item>
						</up-form>
						<up-button type="primary" @click="validateOrderForm" style="margin-bottom: 20rpx">保存</up-button>
					</view>
				</scroll-view>
			</view>
		</up-popup>

		<!-- 调价原因 -->
		<up-form :model="{ adjustReason }" :rules="adjustReasonRules" ref="adjustReasonForm">
			<up-form-item prop="adjustReason" label-position="top">
				<template #label>
					<view>
						<text class="required-star">*</text>
						调价原因
					</view>
				</template>
				<up-textarea placeholder="不同产品需写清楚产品调价原因" v-model="adjustReason" :customStyle="textareaStyle" autoHeight
					@blur="handleReasonBlur"></up-textarea>
			</up-form-item>
		</up-form>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>


<script>
import { GetgylList } from '@/apis/SupplyChain/orderAfterSales';
import { useUserStore } from "@/pinia-store/user.js";
import { mapStores } from 'pinia';
export default {
	name: "orderPriceAdjustment",
  props:{
    ApplyDetailList: {
      type: Array,
      default: () => {
        return []
      }
    },
    config: {
      type: Object,
      default: () => {
        return {}
      }
    },
  },
	data() {
		return {
			adjustReason: '', // 存储文本内容
			modalShow: false,
			show: false,
			dateValue: Number(new Date()),
			dateMode: '',
			value: '',
			textareaStyle: {
				minHeight: '200rpx',
				backgroundColor: '#fff',
				border: '1px solid #eaeaea',
				borderRadius: '8rpx',
			},
			orderList: [{
				title: '订单编号',
				field: 'orderNum',
				required: true
			},
			{
				title: '客户名称',
				field: 'customerName',
				required: true
			},
			{
				title: '产品名称',
				field: 'productName',
				required: true,
			},
			{
				title: 'SKU名称',
				field: 'skuName',
				required: true
			},
			{
				title: '最小规格/kg',
				field: 'minimum',
				required: true
			},
			{
				title: '箱规（数量）',
				field: 'weight',
				required: true
			},
			{
				title: '外包装订单数量',
				field: 'piece',
				required: true
			},
			{
				title: '销售单价（最小规格/元）',
				field: 'price',
				required: true
			},
			{
				title: '销售合计/元',
				field: 'priceTotal',
				required: true
			},
			{
				title: '订单重量',
				field: 'weightTotal',
				required: true
			},
			{
				title: '单价（kg/元）',
				field: 'desc',
				required: true
			},
			{
				title: '处理方式',
				field: 'saleType',
				required: true,
				type: 'radio', // 标记为单选框类型
				options: [
					{ label: '涨价', value: '涨价' },
					{ label: '降价', value: '降价' }
				]
			},
			{
				title: '调价后单价',
				field: 'adjustPrice',
				required: true,
			},
			{
				title: '调价后销售合计/元',
				field: 'adjustPriceTotal',
				required: true,
				disabled: true
			},
			{
				title: '调价后单价(公斤/元)',
				field: 'adjustDesc',
				required: true,
				disabled: true
			},
			], // 订单客户信息
			tableData: [{

			},

			], // 订单-客户信息
			productList: [
			], // 要更正的客户信息
			productData: [{}],
			// 订单选择列表
			orderOptions: [],
			// 弹出层控制
			showOrderPopup: false,
			showOrderEditPopup: false,
			showProductEditPopup: false,

			// 当前操作的数据
			currentRowIndex: null,
			// 订单校验规则
			orderRules: {
				orderNum: [{ required: true, message: '请输入订单编号', trigger: 'change' }],
			},
			// 客户信息校验规则
			productRules: {
				customerName: [{ required: true, message: '请输入客户名称', trigger: 'change' }],
			},
			adjustReasonRules: {
				adjustReason: [{ required: true, message: '请输入调整原因', trigger: 'change' }],
			},
			//所属部门
			department: '',
			//销售人员
			salesPerson: '',
			// 初始化当前订单数据
			currentOrder: {
				orderNum: '',
				customerName: '',
				productName: '',
				skuName: '',
				minimum: '',
				weight: '',
				piece: '',
				price: '',
				priceTotal: '',
				weightTotal: '',
				desc: '',
				saleType: '',
				adjustPrice: '',
				adjustPriceTotal: '',
				adjustDesc: ''
			},
			// 初始化当前产品数据
			currentProduct: {
			},
			pageNum: 1,
			pageSize: 15,
			total: 0,
			allGylorderNO: [],
			showOrderListPopup: false,
			isLoadingOrders: false,
			noMoreOrders: false,
			searchKeyword: '',
			tempOrderData: null,
			tempProductData: null,
		}
	},
	created() {
    uni.setStorageSync('orderAfterSalesData', null);
    uni.setStorageSync('orderPriceAdjustmentData', null);
		// this.gGetgylList()

    uni.$on('orderPriceAdjustment',(order)=>{
      this.selectOrderItem(order)
    })
    this.handleDataEcho()
	},
	computed: {
		...mapStores(useUserStore),
		filteredOrders() {
			if (!this.searchKeyword) {
				return this.allGylorderNO; // 没有搜索关键词时返回全部数据
			}
			const keyword = this.searchKeyword.toLowerCase();
			return this.allGylorderNO.filter(order => {
				return (
					(order.order_sum && order.order_sum.toLowerCase().includes(keyword)) ||
					(order.customer_name && order.customer_name.toLowerCase().includes(keyword))
				);
			});
		}
	},
	watch: {
		'currentOrder.adjustPrice'(newVal) {
			if (newVal && !isNaN(newVal)) {
				this.calculateAdjustedPrice();
			}
		},
		'currentOrder.saleType'(newVal) {
			// 切换处理方式时重置调整价格
			if (newVal) {
				this.currentOrder.adjustPrice = '';
				this.currentOrder.adjustPriceTotal = '0.00';
				this.currentOrder.adjustDesc = '0.00';
			}
		}
	},
	methods: {
// 回显数据
  handleDataEcho() {
    if (!this.ApplyDetailList.formData) return;

    const fieldValue = this.ApplyDetailList.formData[this.config.id];
    if (!fieldValue) return;

    try {
      // fieldValue 可能是字符串，要转成对象
      const data = typeof fieldValue === 'string' ? JSON.parse(fieldValue) : fieldValue;

      this.department = data.department || '';
      this.salesPerson = data.salesPerson || '';
      this.tableData = Array.isArray(data.products) && data.products.length > 0 ? data.products : [{}];
      this.value = data.date || '';
      this.adjustReason = data.reason || '';
      this.currentOrder = {
        orderNum: '',
        customerName: '',
        productName: '',
        skuName: '',
        minimum: '',
        weight: '',
        piece: '',
        price: '',
        priceTotal: '',
        weightTotal: '',
        desc: '',
        saleType: '',
        adjustPrice: '',
        adjustPriceTotal: '',
        adjustDesc: '',
        ...this.tableData[0], 
      };

      // 更新本地存储
      this.updateLocalStorage();
    } catch (e) {
      console.error('回显数据解析失败:', e, fieldValue);
    }
  },

		handleSearchInput() {
			// 重置分页参数
			this.pageNum = 1;
			this.noMoreOrders = false;

			// 如果有搜索关键词，使用本地过滤
			if (this.searchKeyword) {
				return;
			}

			// 没有搜索关键词时重新加载数据
			this.allGylorderNO = [];
			this.loadMoreOrders();
		},
		// 打开弹窗时重置分页
		openOrderListPopup() {
      uni.navigateTo({
        url: `/pages/apply/form/components/showOrderListPopup?SupplyChain=orderPriceAdjustment`
      });

			// this.pageNum = 1
			// this.allGylorderNO = []
			// this.noMoreOrders = false
			// this.showOrderListPopup = true
			// this.loadMoreOrders()
		},

		async loadMoreOrders() {
			// 如果有搜索关键词，不执行上拉加载
			if (this.searchKeyword) return;
			// 防止重复加载或已加载全部
			if (this.isLoadingOrders || this.noMoreOrders) return;

			this.isLoadingOrders = true;
			try {
				const res = await GetgylList({
					token: this.userStore.user.token,
					type: 1,
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					orderNumber: ''
				});

				if (res.status == 1) {
					// 确保数据格式正确
					const records = res.data?.records || [];
					this.total = res.data?.total || 0;

					// 处理第一页加载的情况
					if (this.pageNum === 1) {
						this.allGylorderNO = records;
					} else {
						this.allGylorderNO.push(...records);
					}

					// 判断是否还有更多数据
					if (records.length < this.pageSize || this.allGylorderNO.length >= this.total) {
						this.noMoreOrders = true;
					} else {
						this.pageNum += 1;
					}
				} else {
					uni.showToast({
						title: res.message || '加载失败',
						icon: 'none'
					});
				}
				this.modalShow = false
			} catch (err) {
				this.modalShow = false
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				});
			} finally {
				this.modalShow = false
				this.isLoadingOrders = false;
			}
		},
		// 选中订单
		selectOrderItem(order) {
			this.searchKeyword = ''
			// 将选中的订单数据填充到当前编辑的订单表单中
			this.currentOrder = {
				...this.currentOrder,
				orderNum: order.order_sum || '', // 订单编号
			};
			this.GetgylList(order.order_sum)
			// 关闭订单选择弹窗
			this.showOrderListPopup = false;
		},
		async GetgylList(value) {
			try {
				this.modalShow = true;
				const res = await GetgylList({
					token: this.userStore.user.token,
					type: 3,
					orderNum: value,
				});

				if (res.status === 1 && res.data) {
					const orderData = res.data;

					this.department = orderData.department; // 部门
					this.salesPerson = orderData.salesPerson; // 销售人员

					// 暂存订单数据到临时变量
					this.tempOrderData = {
						orderNum: orderData.orderSum || '', // 订单编号
						customerName: orderData.customerName || '',  // 客户名称
						productName: orderData.items[0].productName || '', // 产品名称
						skuName: orderData.items[0].skuName || '', // SKU名称
						minimum: orderData.items[0].minimum || '', // 最小规格
						weight: orderData.items[0].weight || '', // 箱规
						piece: orderData.items[0].piece || '', // 外包装订单数量
						price: orderData.items[0].price || '', // 销售单价
						priceTotal: orderData.items[0].priceTotal || '', // 销售合计
						weightTotal: orderData.items[0].weightTotal || '', // 订单重量
						desc: orderData.items[0].desc, // 单价
					};

					// 暂存产品数据到临时变量
					this.tempProductData =
						orderData.items && orderData.items.length > 0
							? orderData.items.map((item) => ({
                belongId: item.belongId,
								parkName: '',
								productName: item.productName || '',
								skuName: item.skuName || '',
								piece: item.piece || '',
								grossWeight: item.weightTotal || '',
								weight: item.weight || '',
								desc: item.price || '',
								saleType: '退货',
								compensationQuantity: '',
								discountPrice: '',
								actualPayableAmount: '',
								reason: '',
								show: false, // 添加这个字段
							}))
							: [];

					// 更新当前订单表单数据（仅用于显示）
					this.currentOrder = { ...this.tempOrderData };
				}
			} catch (error) {
				console.error('获取订单详情出错:', error);
			} finally {
				this.modalShow = false;
			}
		},

		// 处理单选框变化
		radiochange(e) {
			this.currentOrder.saleType = e;
			// 重置相关字段
			this.currentOrder.adjustPrice = '';
			this.currentOrder.adjustPriceTotal = '';
			this.currentOrder.adjustDesc = '';
		},
		// 计算调整后的价格
		calculateAdjustedPrice() {
			if (!this.currentOrder.adjustPrice || isNaN(this.currentOrder.adjustPrice)) {
				return;
			}

			const adjustPrice = parseFloat(this.currentOrder.adjustPrice);
			const piece = parseFloat(this.currentOrder.piece) || 0;
			const weight = parseFloat(this.currentOrder.weight) || 0;
			const minimum = parseFloat(this.currentOrder.minimum) || 1;

			// 计算调整后的总价
			this.currentOrder.adjustPriceTotal = (piece * weight * adjustPrice).toFixed(2);

			// 计算调整后的单价(公斤/元)
			this.currentOrder.adjustDesc = (adjustPrice / minimum).toFixed(2);
		},
		openPopup() {
			this.show = true;
		},
		closePopup() {
			this.show = false;
		},
		// 选中时间
		confirm(event) {
			var date = this.formatTimestampToYYMMDD(event.value);
			this.value = date;
			this.show = false;

			this.updateLocalStorage()
		},
		// 失去焦点时触发
		handleReasonBlur() {
			this.updateLocalStorage(); // 更新本地缓存
		},
		change() {
			this.updateLocalStorage();
		},
		// 更新本地缓存并通知父组件
		updateLocalStorage() {
			const cachedData = {
				department: this.department,
				salesPerson: this.salesPerson,
				products: this.tableData,
				date: this.value,
				reason: this.adjustReason
			};

			uni.setStorageSync('orderAfterSalesData', cachedData);

			// 触发事件通知父组件数据已更新
			this.$emit('data-updated', cachedData);
		},

		// 打开选择订单弹窗
		openOrderSelect() {
			this.showOrderPopup = true
		},

		// 选择订单
		selectOrder(order) {
			this.tableData = [order]
			this.showOrderPopup = false
		},

		// 点击订单行
		clickorder(row, rowIndex) {
			this.currentOrder = {
				...this.currentOrder, // 保留初始化结构
				...row // 覆盖实际数据
			}
			this.currentRowIndex = rowIndex
			this.showOrderPopup = true
		},

		// 点击产品行
		clickproduct(row, rowIndex) {
			this.currentRowIndex = rowIndex;
			// 深拷贝当前行数据
			this.currentProduct = JSON.parse(JSON.stringify(row));

			// 初始化显示状态
			this.currentProduct.show = this.currentProduct.saleType === '折价';

			// 如果是折价且数据完整，则计算金额
			if (this.currentProduct.saleType === '折价' &&
				this.currentProduct.compensationQuantity &&
				this.currentProduct.discountPrice) {
				this.calculateActualPayable(this.currentProduct);
			}

			this.showProductEditPopup = true;
		},

		// 校验订单表单
		validateOrderForm() {
			this.$refs.orderForm.validate().then((res) => {
				if (res) {
					// 计算调整后的价格
					this.calculateAdjustedPrice();

					// 更新表格数据
					if (this.currentRowIndex !== null) {
						// 编辑现有行
						this.$set(this.tableData, this.currentRowIndex, {
							...this.currentOrder
						});
					} else {
						// 添加新行
						this.tableData.push({ ...this.currentOrder });
					}

					this.updateLocalStorage(); // 更新本地缓存

					// 关闭弹窗并重置
					this.showOrderPopup = false;
					this.currentRowIndex = null;
					this.currentOrder = {
						orderNum: '',
						customerName: '',
						productName: '',
						skuName: '',
						minimum: '',
						weight: '',
						piece: '',
						price: '',
						priceTotal: '',
						weightTotal: '',
						desc: '',
						saleType: '',
						adjustPrice: '',
						adjustPriceTotal: '',
						adjustDesc: ''
					};
				}
			}).catch((errors) => {
				uni.showToast({
					title: '请填写完整订单信息',
					icon: 'none',
				});
			});
		},

		// 校验产品表单
		validateProductForm() {
			this.$refs.productForm.validate().then(res => {
				if (res) {
					this.saveProductEdit()
					this.updateLocalStorage(); // 更新本地缓存
				}
			}).catch(errors => {
				uni.showToast({
					title: '请填写完整订单信息',
					icon: 'none'
				})
			})
		},

		saveProductEdit() {
			// 保存前重新计算确保数据准确
			if (this.currentProduct.saleType === '折价') {
				this.calculateActualPayable(this.currentProduct);
			}

			// 更新到产品数据
			this.$set(this.productData, this.currentRowIndex, {
				...this.currentProduct,
				show: this.currentProduct.saleType === '折价'
			});
			this.showProductEditPopup = false;
		},
		// 删除行
		deleteRow(index) {
			uni.showModal({
				title: '提示',
				content: '确定要删除这条记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.tableData.splice(index, 1)
						// 如果删除的是当前编辑的行，关闭弹窗
						if (this.currentRowIndex === index) {
							this.showOrderPopup = false
						}
						this.updateLocalStorage()
					}
				}
			})
		},
		// 时间戳转换
		formatTimestampToYYMMDD(timestamp) {
			const date = new Date(timestamp);
			const year = date.getFullYear().toString();
			const month = ('0' + (date.getMonth() + 1)).slice(-2);
			const day = ('0' + date.getDate()).slice(-2);
			const hour = ('0' + date.getHours()).slice(-2);
			const minute = ('0' + date.getMinutes()).slice(-2);
			if (this.dateMode === 'date') {
				return `${year}-${month}-${day}`;
			} else if (this.dateMode === 'datetime') {
				return `${year}-${month}-${day} ${hour}:${minute}`;
			} else if (this.dateMode === 'year-month') {
				return `${year}-${month}`;
			}
			return `${year}-${month}-${day}`; // 返回 YYMMDD 格式的字符串
		}
	}
}
</script>

<style scoped lang="scss">
.containerzi{
  background-color: #ffffff
}

.order-item {
	padding: 20rpx;
	border-bottom: 1px solid #eee;
}

.loading-text,
.no-more-text {
	text-align: center;
	color: #888;
	padding: 20rpx 0;
}

/* 隐藏字段样式 */
.hidden-field {
	display: none;
}

::v-deep uni-button {
	margin-left: 0 !important;
	margin-right: 10rpx !important;
	border: none !important;
}

.table-container {
	width: 100%;
}

/* 订单表格专属优化 */
.order-table {

	th,
	td {
		width: auto;

		&:first-child {
			width: auto;
		}
	}

	/* 交替行背景色 */
	tr:nth-child(even) td {
		background-color: #fafafa;
	}

	/* 重要数据突出显示 */
	.highlight {
		color: #e74c3c;
		font-weight: 500;
	}
}

.scroll-view {
	width: 95vw;
	white-space: nowrap;
	padding: 10rpx 0;
}

.mobile-table {
	width: auto;
	min-width: 100%;
	border-collapse: separate;
	border-spacing: 0;

	th,
	td {
		padding: 16rpx 24rpx;
		border-bottom: 1px solid #eee;
		font-size: 26rpx;
		line-height: 1.4;
	}

	th {
		background: #f1f2f4;
		color: #333;
		font-weight: 500;
		position: relative;

		&:not(:first-child)::after {
			content: "";
			position: absolute;
			right: 0;
			top: 10%;
			height: 80%;
			width: 1px;
			background: #ddd;
		}
	}

	td {
		color: #666;
		background: #fff;
	}

	.sticky-header {
		position: sticky;
		left: 0;
		z-index: 2;
		width: auto;
	}

	.sticky-col {
		position: sticky;
		left: 0;
		background: #f9f9f9;
		z-index: 1;
	}
}

.nowrap {
	white-space: nowrap;
}

.required-star {
	color: #e74c3c;
	margin-right: 4rpx;
	font-size: 28rpx;
	vertical-align: middle;
}

:required {
	border-left: 4rpx solid #e74c3c;
}


.popup-content {
	padding: 30rpx;
	background: #fff;
	border-radius: 20rpx 20rpx 0 0;

	.popup-header {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.order-item {
		padding: 20rpx;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;

		&:active {
			background-color: #f5f5f5;
		}
	}
}

.popup-container {
	width: 100vw;
	height: 100%;
	background-color: #f3f3f3;
	display: flex;
	flex-direction: column;
}

.popup-containerd {
	background-color: #f5f5f5;
	padding: 0 20rpx;
	height: calc(100vh - 100rpx);
}

.popup-scroll {
	height: 100%;
}

.search-box {
	//margin-bottom: 20rpx;
	background: #fff;
	border-radius: 12rpx;
	padding: 10rpx 20rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}



.order-item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	position: relative;
	display: flex;
	flex-direction: column;
	transition: all 0.2s;

	&:active {
		background-color: #f8f8f8;
		transform: scale(0.99);
	}
}

.order-info {
	display: flex;
	margin-bottom: 12rpx;
	font-size: 28rpx;

	&:last-child {
		margin-bottom: 0;
	}
}

.order-label {
	color: #666;
	width: 140rpx;
}

.order-value {
	color: #333;
	flex: 1;
	font-weight: 500;
}

.order-arrow {
	position: absolute;
	right: 24rpx;
	top: 50%;
	transform: translateY(-50%);
}

.loading-text,
.no-more-text {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30rpx 0;
	color: #999;
	font-size: 26rpx;

	text {
		margin-top: 16rpx;
	}
}

.u-page {
	padding: 0;
}

.u-cell-icon {
	width: 36rpx;
	height: 36rpx;
	margin-right: 8rpx;
}

.u-cell-group__title__text {
	font-weight: bold;
}

:deep(.u-form-item__body__right__message) {
	margin-left: 0 !important;
}
</style>
